<%@page import="org.proddevplm.dao.data.Project"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Map"%>

<% 
	List userProjects = (List)session.getAttribute("projects");
	Project project;
%>

<script>
	var flag = false;
	<%if(userProjects.size()!=0)%>flag = true;
	
	$(document).ready(function(){
		if(flag){
			$("#openProject")
				.tablesorter({
					widthFixed:true,
					debug:false,
					widgets:['zebra'],
					sortList: [[0,0]]
				})
				.tablesorterPager({container: $("#openPager")})
				.tablesorterFilter({filterContainer: "#openFilter-box",
	         		filterClearContainer: "#openFilter-clear-button",
	                filterCaseSensitive:false,
	                filterColumns: [1,2]
			})
		}	
	}); 

</script>

<div style="font-family:verdana; font-size:medium; color:darkblue; text-align:center; margin-top:20px; margin-bottom:20px">Open project</div>

<div align="center" >
	<div style="width:auto">
	
		<div style="float:right; margin-bottom:-10px; text-align:right; ">
			Search table: <input name="filter" id="openFilter-box" value="" maxlength="30" size="30" type="text" style="background-color:#E6EEEE">
			<input id="openFilter-clear-button" type="submit" value="Clear" style="background-color:#E6EEEE;"/>
		</div>
		<div style="clear:both;"></div>
		<table id="openProject" class="tablesorter" style="width:100%" rules="rows" frame="hsides" bordercolor="#DBDBDB">
			<thead>
				<tr>
					<th>Project ID</th>
					<th>Project Name</th>
					<th>Project Description</th>			
				</tr>		
			</thead>
			
			<tbody>
				<%
				for (int i=0; i<userProjects.size(); i++) {
					project = (Project)userProjects.get(i);%>
					<tr>
						<td style="width:8%; text-align:center"><%=project.getId()%></td>
						<td style="width:35%">
							<a href="/proddev/controller?manager=projectManager&method=2&projectId=<%=project.getId()%>"><%=project.getName()%></a></td>
						<td ><%=project.getDescription()%></td>
					</tr>
					<%} %>
			
			</tbody>
		</table>
		<div id="openPager" class="pager" style="float:right; margin-top:-10px">
			<form>
				<img src="/proddev/images/tablePager/first.png" class="first" width="20" height="20" />
				<img src="/proddev/images/tablePager/previous.png" class="prev" width="20" height="20" />
				<input type="text" class="pagedisplay" style="text-align:center; width:40px; height:20px; background-color:#E6EEEE"/>
				<img src="/proddev/images/tablePager/next.png" class="next" width="20" height="20" />
				<img src="/proddev/images/tablePager/last.png" class="last" width="20" height="20" />
				<select class="pagesize" style="height:20px;">
					<option SELECTED value="5">set paging</option>
					<option value="5">5 per page</option>
					<option value="10">10 per page</option>
					<option value="20">20 per page</option>
					<option value="30">30 per page</option>					
				</select>
			</form>
		</div>	
		<div style="clear:both"></div>
	</div>
</div>